<template>
  <div class="col-md-8">
    <h3 class="reply">评论回复：</h3>
    <h2 style='display: none'>暂无评论，点击左侧添加评论！！！</h2>
    <h2 v-if="comments.length===0">没有数据</h2>
    <ul class="list-group" v-else>
      <Item v-for="(comment,index) in comments" :key="index" :index="index" :comment="comment" :deleteComment="deleteComment"></Item>
    </ul>
  </div>
</template>

<script>
  // 1. 引入组件
  import Item from "./Item";

  export default {
    name: "List",
    // 2. 映射组件标签
    components: {Item},
    // 3. 声明接受属性
    // props: ['comments'] // 只指定属性名
    props: {
      comments: {
        type: Array,
        required: true
      },
      deleteComment: {
        type: Function,
        required: true
      }
    }
  }
</script>

<style scoped>
  .reply {
    margin-top: 0px;
  }


  .handle {
    width: 40px;
    border: 1px solid #ccc;
    background: #fff;
    position: absolute;
    right: 10px;
    top: 1px;
    text-align: center;
  }

  .handle a {
    display: block;
    text-decoration: none;
  }

  .list-group-item .centence {
    padding: 0px 50px;
  }

  .user {
    font-size: 22px;
  }

</style>
